<script>
export default {
  name: "myinfo",
  data() {
    return {
      form: {
        id: '',
        nickname: '',
        avatar: '',
        newPassword2: '',
        newPassword: '',
      },
      action: this.$baseUrl + '/api/upload/file',
      fileList: []
    }
  },
  onShow() {
    if (!this.$store.state.userInfo.id) {
      uni.showToast({
        title: '请先登录',
        icon: 'none'
      })
      return
    }
    this.$api.getMemberInfo({
      id: this.$store.state.userInfo.id
    }).then(res => {
      this.form = res
    })
  },
  methods: {
    successFile(e) {
      this.form.avatar = e.data.url
    },
    removeFile() {
      this.form.avatar = ''
    },
    submit() {
      uni.showLoading({
        title: '保存中'
      })
      this.$api.updateMemberInfo({
        ...this.form,
      }).then(() => {
        uni.hideLoading()
        uni.showToast({
          title: '保存成功',
          icon: 'success',
          duration: 2000
        })
      }).catch(() => {
        uni.hideLoading()
      })
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '退出成功',
              icon: 'success'
            })
            setTimeout(() => {
              this.$store.commit('SET_USERINFO', {})
              uni.removeStorageSync('userInfo')
              uni.reLaunch({
                url: '/pages/index/index'
              })
            }, 300)
          }
        }
      })
    }
  }
}
</script>

<template>
  <div class="myinfo">
    <div class="form-box">
      <u-form :model="form" ref="uForm" label-width="auto">
        <u-form-item label="头像">
          <u-upload :action="action" max-count="1" :file-list="fileList" @on-success="successFile" @on-remove="removeFile"></u-upload>
        </u-form-item>
        <u-form-item label="昵称"><u-input v-model="form.nickname" /></u-form-item>
        <u-form-item label="旧密码"><u-input v-model="form.password" type="password"/></u-form-item>
        <u-form-item label="新密码"><u-input v-model="form.newPassword"  type="password"/></u-form-item>
        <u-form-item label="新密码"><u-input v-model="form.newPassword2"  type="password"/></u-form-item>

      </u-form>
    </div>
    <div class="primary-button" @click="submit" style="margin-bottom: 20rpx">保存</div>
    <div class="primary-button primary-button2" @click="logout" >退出登录</div>
  </div>
</template>

<style lang="scss">
.myinfo {
  height: 100%;
  background-color: #F5F7FA;
  padding: 20rpx;
  .primary-button {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 41px;
    line-height: 41px;
    font-size: 16px;
    color: #fff;
    background-color: rgb(254, 129, 5);
    border-radius: 5px;
    box-sizing: border-box;
  }
  .primary-button2 {
    background-color: #FF0000;
  }
  .form-box {
    border-radius: 10px;
    background-color: #FFFFFF;
    padding: 20rpx;
  }
}
</style>